<template>
  <div>
    <el-form ref="elForm" :model="formData"  size="medium" label-width="100px"
             label-position="left">
      <el-form-item label-width="125px" label="是否触发保存点" >
        <el-switch v-model="formData.isSavePoint"></el-switch>
      </el-form-item>
      <el-form-item label-width="125px" label="保存点路径"  v-if="formData.isSavePoint">
        <el-input v-model="formData.savePointPath" clearable :style="{width: '100%'}"></el-input>
        <br>
        <el-tag effect="dark" type="dander" size="small">注意：</el-tag>
        <span>以 / 开头，不要带Hdfs等协议</span>
      </el-form-item>
      <el-form-item label-width="125px" label="isDrain" v-if="formData.isSavePoint">
        <el-switch v-model="formData.isDrain"></el-switch>
        <br>
        <el-tag effect="dark" type="dander" size="small">注意：</el-tag>
        <span>在获取savepoint的时候，停止pipeline之前发送MAX_WATERMARK，切记慎开启</span>
      </el-form-item>
      <el-form-item size="mini">
        <el-button type="primary" @click="submitForm">停止作业</el-button>
        <el-button @click="cancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import Swal from "sweetalert2";
import {stopJob} from "@/api/resource/job";

export default {
  components: {},
  props: {
    formData: {
      type: Object,
      default: null
    }
  },
  computed: {},
  watch: {},
  created() {
  },
  mounted() {
  },
  methods: {
    submitForm() {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        Swal.fire({
          icon: 'success',
          title: 'The current job is stopping',
          showConfirmButton: false,
          timer: 2000
        }).then((r) => {
          stopJob(this.formData).then(res => {
            this.$emit("cancelClick", 'stop')
          })
        })
      })
    },

    cancel() {
      this.$refs['elForm'].resetFields();
      this.$emit("cancelClick")
    }


  }
}

</script>
<style>
</style>
